<template>
  <div class="table">
    <div class="item">
      <div class="col">
        <div class="label"
             style="width:180px">车牌号</div>
			 <div class="label"
             style="width:200px">空车皮重</div>
        <div class="label">载重吨</div>
		<div class="label">车主</div>
		<div class="label"
             style="width:180px">车主联系方式</div>
		<div class="label">司机</div>
		<div class="label">状态</div>
		<div class="label" style="width:100px">创建人</div>
		<div class="label" style="width:180px">创建时间</div>
		<div class="label"
             style="width:200px">操作</div>
        <div class="value" v-for="item in data"
         :key="item.id">{{item.ivoyage}}/{{item.evoyage}}</div>
      </div>
      <div class="col">
        
        <!-- <div class="value btns">
          <el-button v-if="item.checkStatus=='3'"
                     @click="cancel(item.id)"
                     type="text"
                     style="color: #1955CF">取消</el-button>
          <template v-if="item.checkStatus=='0' ||item.checkStatus=='2' || item.checkStatus=='4'">
            <el-button @click="edit(item)"
                       type="text"
                       style="color: #1955CF">编辑</el-button>
            <el-button type="text"
                       style="color:  #eb2a2a"
                       @click="del(item.id)">删除</el-button>
          </template>
          
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myTable',
  props: ['data'],
  components: {},
  data() {
    return {
      colors: [
        { color: '#333333', background: '#F4F4F5' },
        { color: '#67C23A', background: '#F0F9EB' },
        { color: '#0F47B8', background: '#ECF5FF' },
        { color: '#FF3838', background: '#FEF0F0' },
        { color: '#0F47B8', background: '#ECF5FF' },
        { color: '#FF3838', background: '#FEF0F0' },
        { color: '#333333', background: '#F4F4F5' },
        { color: '#333333', background: '#F4F4F5' },
        { color: '#67C23A', background: '#F0F9EB' },
        { color: '#FF3838', background: '#FEF0F0' },
        { color: '#333333', background: '#F4F4F5' },
      ],
    }
  },

  methods: {
    edit(item) {
      let name = item.scdType == 'CONTAINER' ? 'addContainer' : 'addBulk'
      this.$router.push({
        name: name,
        query: {
          id: item.id,
        },
      })
    },
    del(id) {
      this.$emit('del', id)
    },
    //校验
    toLoadList(row, type) {
      this.$router.push({
        name: type,
        query: { id: row.id },
      })
    },
  },

  computed: {},

  mounted() {},
}
</script>
<style lang='scss' scoped>
.table {
  overflow-x: scroll;
}
.item {
  display: flex;
  margin-top: 20px;
  width: auto;

  .col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    .label {
      height: 33px;
      background: #f5f5f5;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }
    .value {
      height: 33px;
    //   border: 1px solid #e5e5e5;
    //   border-left: 0;
      display: flex;
      align-items: center;
      padding: 10px;
    //   box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
    }
    .btns {
      display: flex;
      align-items: center;
      flex: 1;
      button {
        font-size: 12px;
        margin-left: 5px;
      }
    }
    img {
      width: 30px;
      height: 27.95px;
    }
    .withimg {
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }
    }
    .withback {
      width: 60px;
      height: 24px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
</style>